<template>
    <Header />
    <div class="myCoupon hidden-xs-only">
        <titleBar title="我的钱包"  style="margin-top: 30px;"/>
        <div class="cotent pd30">
            <div class="moneyNum">
                <div>提现现金 ： 0.00元</div>
                <div>不可用金额：0.00元</div>
                <div class="flex-right">
                    <el-button round>提现</el-button>
                </div>
            </div>
            
            <div class="mb20 mt20">
                资金记录：
            </div>
            <div class="flex-around mb10">
                <div class="bold">
                    积分
                </div>
                <div class="bold">
                    用途
                </div>
                <div class="bold">
                    日期
                </div>
            </div>
            <div class="money-record flex-around mb10">
                <div class="bold colorYellow">
                    -1200.00元
                </div>
                <div>
                    预订酒店支出
                </div>
                <div>
                    2024-02-28
                </div>
            </div>
            <div class="money-record flex-around mb10">
                <div class="bold colorGreen">
                    -1200.00元
                </div>
                <div>
                    预订酒店支出
                </div>
                <div>
                    2024-02-28
                </div>
            </div>
        </div>

        
    </div>
    <!-- 手机版的导航栏 -->
    <div class="myCoupon-phone hidden-sm-and-up">
        <titleBar title="我的钱包" />
        <div class="cotent pd30">
            <div class="moneyNum">
                <div>提现现金 ： 0.00元</div>
                <div>不可用金额：0.00元</div>
                <div class="flex-right">
                    <el-button round>提现</el-button>
                </div>
            </div>
            
            <div class="mb20 mt20">
                资金记录：
            </div>
            <div class="flex-around mb10 ">
                <div class="bold">
                    金额
                </div>
                <div class="bold">
                    用途
                </div>
                <div class="bold">
                    日期
                </div>
            </div>
            <div class="money-record flex-around mb10 fz12">
                <div class="bold colorYellow">
                    -1200.00元
                </div>
                <div>
                    预订酒店支出
                </div>
                <div>
                    2024-02-28
                </div>
            </div>
            <div class="money-record flex-around mb10 fz12">
                <div class="bold colorGreen">
                    -1200.00元
                </div>
                <div>
                    预订酒店支出
                </div>
                <div>
                    2024-02-28
                </div>
            </div>
        </div>

        
    </div>
    
</template>
<script lang="ts" setup>
    import Header from '@/components/Header.vue'
    import titleBar from '@/components/titleBar.vue'
    import { ref } from 'vue'
    import type { TabsPaneContext } from 'element-plus'

    const activeName = ref('first')

    const handleClick = (tab: TabsPaneContext, event: Event) => {
        console.log(tab, event)
    }

</script>

<style lang="scss" scoped>
    @import '@/assets/variables.scss';

    .myCoupon {
        max-width: $border-primary-max-width;
        margin: 0 auto;

        .cotent{
            width: 100%;
            height: 500px;
            background-color: #FAFAFA;

            .moneyNum{
                max-width: 400px;
                color: #fff;
                background-color: #356CEB;
                border-radius: 10px;
                padding: 20px;

            }
            .money-record{
                background-color: #EDF3FD;
                border-radius: 5px;
                padding: 10px 0;
            }
            }
            

    }
    .myCoupon-phone {
        max-width: $border-primary-max-width;
        margin: 0 auto;

        .cotent{
            width: 100%;
            height: 500px;
            background-color: #FAFAFA;

            .moneyNum{
                max-width: 400px;
                color: #fff;
                background-color: #356CEB;
                border-radius: 10px;
                padding: 20px;

            }
            .money-record{
                background-color: #EDF3FD;
                border-radius: 5px;
                padding: 10px 0;
            }
            }
            

    }
    
</style>